<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1.0, user-scalable=no">
		<link rel="stylesheet" href="./layui/css/layui.css">
		<link rel="stylesheet" href="./css/common.css">
		<link rel="stylesheet" href="./css/home.css">
		<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
		<title>飞鸟</title>
	</head>
	<body>
		<!-- 头部 -->
		<div class="header clearfix">
			<div class="h-left">
				<img src="./img/logo.png" >
				<span>后台管理</span>
			</div>
			<div class="h-right">
				<span class="mr25">2019年08月22日</span>
				<span class="mr25">星期四</span>
				<span class="avatar mr10"><img src="./img/avatar.png" alt=""></span>
				<span class="user mr30">赵先生您好！</span>
			</div>
		</div>
		<!-- 左侧 -->
		<div class="left">
			<ul class="nav">
				<li class="item count active">
					数据总览
					<span class="layui-icon layui-icon-right jiantou"></span>
					<span class="line"></span>					
				</li>
				<li class="item huiyuan">
					会员管理
					<span class="layui-icon layui-icon-right jiantou"></span>
					<span class="line"></span>
				</li>
				<li class="item down">
					下载记录
					<span class="layui-icon layui-icon-right jiantou"></span>
					<span class="line"></span>
				</li>
				<li class="item chongzhi">
					充值记录
					<span class="layui-icon layui-icon-right jiantou"></span>
					<span class="line"></span>
				</li>
				<li class="item qianxian">
					供应商权限
					<span class="layui-icon layui-icon-right jiantou"></span>
					<span class="line"></span>
				</li>
			</ul>
		</div>
		<!-- 右侧 -->
		<div class="right">
			<div class="title clearfix">
				<div class="t-left">数据总览</div>
				<div class="t-right">
					<span class="day active">7天</span>
					<span class="day">15天</span>
					<span class="day">30天</span>
				</div>
			</div>
			<div class="content">
				<ul class="list1 clearfix">
					<li class="item">
						<p class="p1">564</p>
						<p class="p2">今日下载量/次</p>
					</li>
					<li class="item">
						<p class="p1">765</p>
						<p class="p2">今日注册会员数</p>
					</li>
					<li class="item">
						<p class="p1">564</p>
						<p class="p2">总会员数</p>
					</li>
					<li class="item zhifu">
						<div class="z-left">
							<p class="p1">1050</p>
							<p class="p2">今日支付宝充值</p>
						</div>
						<div class="z-right">
							<p class="p1">1050</p>
							<p class="p2">今日卡密充值</p>
						</div>
					</li>
					<li class="item">
						<p class="p1">152653</p>
						<p class="p2">7天活跃</p>
					</li>
				</ul>
				<div class="list2 clearfix">
					<div class="list2-l">
						<div class="title clearfix">
							<div class="t-left">下载量/次</div>
							<div class="t-right">
								<span class="day active">7天</span>
								<span class="day">15天</span>
								<span class="day">30天</span>
							</div>
						</div>
						<div>
							<div id="biao1" style="height:380px;width: 100%;"></div>
						</div>
					</div>
					<div class="list2-r">
						<div class="title clearfix">
							<div class="t-left">成交额/元</div>
							<div class="t-right">
								<span class="day active">7天</span>
								<span class="day">15天</span>
								<span class="day">30天</span>
							</div>
						</div>
						<div>
							<div id="biao2" style="height:380px;width: 100%;"></div>
						</div>
					</div>
				</div>
			</div>
			
		</div>
	</body>
	
	<script type="text/javascript">
		layui.use(['laypage', 'element','jquery','layer','table'], function(){
		  var laypage = layui.laypage,
			  $ = layui.$,
			  layer = layui.layer,
			  table = layui.table,
			  element = layui.element;
			
			});
	</script>
	<!-- 表一 -->
	<script type="text/javascript">
	    // 基于准备好的dom，初始化echarts图表
	    var myChart = echarts.init(document.getElementById('biao1'));	
	    option = {
	        color: ['skyblue'],
	        tooltip : {
	            trigger: 'axis'
	        },
	        calculable : false,
	        xAxis : [
	            {
	                type : 'category',
	                boundaryGap : true,
	                data : ['08-20','08-21','08-22','08-23','08-24','08-25','08-26','08-27','08-28','08-29']
	            }
	        ],
	        yAxis : [
	            {
	                type : 'value',
	                min:0,
	                max:1000
	            }
	        ],
	        series : [
	            {
	                name:'下载量/次',
	                type:'line',
	                symbolSize:5,
	                symbol:'circle',
	                stack: '总量',
	                smooth: true,
	                itemStyle: {
	                    normal: {
	                      color:'#4170f2',
	                      borderColor:'#4170f2',//拐点边框颜色
	                      borderWidth:3,//拐点边框大小
	                      areaStyle:{
	                      type: 'default',
	                      color : new echarts.graphic.LinearGradient(0, 0, 0, 1,//变化度
	                        //三种由深及浅的颜色
	                        [ {
	                          offset : 0,
	                          color : '#91acf7'
	                        },
	                        {
	                          offset : 1,
	                          color : '#e7edfd'
	                        } ]),
	                      }
	                    }
	                  },
	                data:[800, 1000, 500, 700, 400, 950, 390,750,480,620,380,850]
	            }
	        ]
	    };
	    // 为echarts对象加载数据
	    myChart.setOption(option);
	</script>
	<!-- 表二 -->
	<script type="text/javascript">
	    // 基于准备好的dom，初始化echarts图表
	    var myChart = echarts.init(document.getElementById('biao2'));	
	    option = {
	        color: ['#91acf7'],
	        tooltip : {
	            trigger: 'axis'
	        },
	        calculable : false,
	        xAxis : [
	            {
	                type : 'category',
	                boundaryGap : true,
	                data : ['18-20','18-21','18-22','18-23','18-24','18-25','18-26','18-27','18-28','18-29']
	            }
	        ],
	        yAxis : [
	            {
	                type : 'value',
	                min:0,
	                max:2000
	            }
	        ],
	        series : [
	            {
	                name:'成交额/元',
	                type:'line',
	                symbolSize:5,
	                symbol:'circle',
	                stack: '总量',
	                smooth: true,
	                itemStyle: {
	                    normal: {
	                      color:'#4170f2',
	                      borderColor:'#4170f2',//拐点边框颜色
	                      borderWidth:3,//拐点边框大小
	                      areaStyle:{
	                      type: 'default',
	                      color : new echarts.graphic.LinearGradient(0, 0, 0, 1,//变化度
	                        //三种由深及浅的颜色
	                        [ {
	                          offset : 0,
	                          color : '#91acf7'
	                        },
	                        {
	                          offset : 1,
	                          color : '#e7edfd'
	                        } ]),
	                      }
	                    }
	                  },
	                data:[1600, 2000, 1000, 1400, 800, 1900, 780,1500,960,1240,960,1700]
	            }
	        ]
	    };
	    // 为echarts对象加载数据
	    myChart.setOption(option);
	</script>
</html>
